<template>
    <div class="AddConfig" @click="showModal">
        <img class="Icon" :src="folder" />
        <span class="Title">新建分组</span>
    </div>
    <a-modal v-model:open="open" title="新建分组" @ok="handleOk">
        <a-form style="padding:40px 0">
            <a-form-item label="分组名称">
                <a-input v-model:value="Name"></a-input>
            </a-form-item>
        </a-form>
    </a-modal>
</template>
 
<script setup>
// 基础引用
import { ref } from 'vue'
import folder from "./folder.png?url";

const open = ref(false);
const showModal = () => {
    open.value = true;
};
const handleOk = e => {
    console.log(e);
    open.value = false;
};

const Name = ref('');

</script>

<style lang="less" scoped>
.Title {
    font-size: 15px;
    font-weight: bold;
}

.Icon {
    width: 24px;
    margin: 0 10px 0 0;
}

.AddConfig {
    display: flex;
    align-items: center;
}
</style>